import React from 'react';
import { Table, Space, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface RecordItem {
  key: string;
  streamerName: string;
  title: string;
  startTime: string;
  duration: string;
  status: string;
}

const RecordTable: React.FC = () => {
  // 示例数据
  const data: RecordItem[] = [
    {
      key: '1',
      streamerName: '主播A',
      title: '游戏直播',
      startTime: '2023-05-01 20:00',
      duration: '2小时30分钟',
      status: '已完成',
    },
    {
      key: '2',
      streamerName: '主播B',
      title: '聊天直播',
      startTime: '2023-05-02 19:00',
      duration: '3小时15分钟',
      status: '已完成',
    },
    {
      key: '3',
      streamerName: '主播C',
      title: '音乐直播',
      startTime: '2023-05-03 21:00',
      duration: '1小时45分钟',
      status: '进行中',
    },
  ];

  const columns: ColumnsType<RecordItem> = [
    {
      title: '主播名称',
      dataIndex: 'streamerName',
      key: 'streamerName',
    },
    {
      title: '直播标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '时长',
      dataIndex: 'duration',
      key: 'duration',
    },
 
    {
      title: '操作',
      key: 'action',
      render: (_, _record) => (
        <Space size="middle">
          <Button type="link">查看</Button>
          <Button type="link">下载</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <h2>直播录制记录</h2>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default RecordTable;